<template>
  <panel :title="title">
    <el-form
      ref="modifyForm"
      :model="modifyForm"
      label-width="110px"
      class="add-form"
      :rules="rules"
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input v-model="modifyForm.oldPassword" type="password"></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="modifyForm.newPassword" type="password"></el-input>
      </el-form-item>

      <el-form-item label="确认新密码" prop="againPwd">
        <el-input v-model="modifyForm.againPwd" type="password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="warning" @click="submitForm">确定</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </panel>
</template>

<script>
import Panel from "@/components/panel/Panel.vue";
import { checkPwdReg } from "@/utils/tools";
import { modifyPwd, checkOldPwd } from "@/api/user";

export default {
  components: {
    Panel,
  },
  data() {
    // 验证原密码
    const checkOldPwd = (rule, value, callback) => {
      // 验证不为空 不用验证格式以及长度是否正确  因为这个是给后台做的
      if (!value) {
        callback(new Error("请输入原密码"));
      } else {
        callback();
      }
    };

    // 验证新密码
    const checkNewPwd = (rule, value, callback) => {
      // 验证不为空 验证正则表达式 然后验证和原密码不一样
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (!checkPwdReg(value)) {
        callback(new Error("6 ~ 12 位,数字/字母/下划线/-"));
      } else if (this.modifyForm.oldPassword === value) {
        callback(new Error("不能与原密码相同"));
      } else {
        if (this.modifyForm.againPwd !== "") {
          this.$refs.modifyForm.validateField("againPwd");
        }
        callback();
      }
    };

    // 验证再次新密码
    const checkAgainPwd = (rule, value, callback) => {
      // 验证不为空 验证和新密码是否
      if (!value) {
        callback(new Error("请再次输入新密码"));
      } else if (this.modifyForm.newPassword !== value) {
        callback(new Error("两次的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      title: "修改密码",
      modifyForm: {
        oldPassword: "",
        newPassword: "",
        againPwd: "",
      },
      rules: {
        oldPassword: {
          required: true,
          validator: checkOldPwd,
          trigger: "blur",
        },
        newPassword: {
          required: true,
          validator: checkNewPwd,
          trigger: "blur",
        },
        againPwd: { required: true, validator: checkAgainPwd, trigger: "blur" },
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.modifyForm.validate(async (valid) => {
        if (valid) {
          console.log("发送ajax");

          try {
            let checkOldRes = await checkOldPwd({
              oldPwd: this.modifyForm.oldPassword,
            });

            let {code, msg} = checkOldRes.data
            if (code === "00") {
              let newRes = await modifyPwd({
                newPwd: this.modifyForm.newPassword,
              });
              this.$router.push('/login')
            } else {
              this.$message.error(msg)
            }
          } catch (err) {
            console.log(err)
          }
        } else {
          return;
        }
      });
    },
    reset() {
      this.$refs.modifyForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.add-form {
  /deep/ .el-input__inner {
    width: 200px;
  }
}
</style>